<template>
  <div class="xjc">
    <el-dialog
      :title="data.equipmentName"
      :visible="detailVisible"
      :direction="direction"
      :destroy-on-close="true"
      :before-close="drawClose"
      width="60%"
      class="aaa"
      :close-on-click-modal="false"
      @opened="init"
    >
      <div class="health">
        <div class="health_left">
          <div class="health_left_img">
            <div class="health_left_img_cenner">
              <el-image
                style="width: 100%; height: 100%; margin-top: 12px"
                :src="urls"
              ></el-image>
            </div>
          </div>
          <div class="health_left_button">
            <el-button type="primary" icon="el-icon-cpu" style="width: 100%"
              >设备编号:{{ data.sn }}</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-c-scale-to-original"
              style="width: 95%"
              >设备电量:{{ data.voltage }}V</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-odometer"
              style="width: 100%"
              >设备温度:{{ data.temperature }}℃</el-button
            >
            <el-button type="primary" icon="el-icon-time" style="width: 100%"
              >安装时间:{{ data.installTime }}</el-button
            >
          </div>
        </div>
        <div class="health_cenner">
          <div class="chart-wrapper">
            <div style="margin: 30px 30px; font-size: 18px; color: #01c2ff">
              数据时间: {{ data.dataList ? data.dataList.dataTime : "" }}
            </div>
            <line-chart v-if="data.dataList" :chart-data="data.dataList" />
          </div>
        </div>
        <div class="health_right">
          <div class="health-right_on">倾角传感器</div>

          <div id="container"></div>
          <div class="textLeft">
            <div>陀螺仪编号: {{ data.gyroscopeCode }}</div>
            <div>
              数据时间:
              {{ gyroscopeData.dataTime }}
            </div>
            <div>
              <span class="textLeftSpan">X :{{ gyroscopeData.dataX }}</span>
              <span class="textLeftSpan">Y:{{ gyroscopeData.dataY }}</span>
              <span class="textLeftSpan">Z:{{ gyroscopeData.dataZ }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="foots">
        <div class="foots_table">
          <div class="foots_ringht">
            <div style="margin: auto 30px; font-size: 16px; color: #01c2ff">
              探针温度:
              {{
                data.temperatureData ? data.temperatureData.temperature : "-"
              }}℃
            </div>
            <line-pie-one :id="'wdbh'" :chart-data="wdbhData"></line-pie-one>
          </div>
        </div>
      </div>

      <div class="foot">
        <div class="foot_table">
          <div class="bbb" @click="fn(1)" :class="{ active: activeShow == 1 }">
            振动任务<i class="header-icon el-icon-document"></i>
          </div>
          <div class="bbb" @click="fn(2)" :class="{ active: activeShow == 2 }">
            温度采集<i class="header-icon el-icon-document"></i>
          </div>
          <div v-if="isShow" class="bbb_img">
            <el-table
              key="table1"
              :data="taskList"
              style="width: 100%; height: 100%"
              :header-cell-style="{ background: '#00091A', color: '#1FBCF5' }"
              :cell-style="{ padding: '0' }"
              max-height="170"
            >
              <el-table-column prop="beginTime" label="开始时间" width="180px">
              </el-table-column>
              <el-table-column prop="taskName" label="任务名称">
              </el-table-column>
              <el-table-column prop="duration" label="采集时长">
              </el-table-column>
              <el-table-column prop="startData" label="开始数据">
              </el-table-column>
              <el-table-column prop="endData" label="结束数据">
              </el-table-column>
              <el-table-column prop="inversionInterval" label="数据间隔">
              </el-table-column>
              <el-table-column prop="inversionSlice" label="层厚">
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <span style="cursor: pointer" @click="getResult(scope.row)"
                    >查看</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-if="!isShow" class="bbb_img">
            <el-table
              key="table2"
              :data="taskList"
              style="width: 100%; height: 100%"
              :header-cell-style="{ background: '#00091A', color: '#1FBCF5' }"
              :cell-style="{ padding: '0' }"
              max-height="170"
            >
              <el-table-column
                prop="beginTime"
                label="开始时间"
                width="180px"
              />
              <el-table-column prop="taskName" label="任务名称" />
              <el-table-column prop="startData" label="开始数据" />
              <el-table-column prop="endData" label="结束数据" />
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <span style="cursor: pointer" @click="getResult(scope.row)"
                    >查看</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 温度采集的 查看方法 -->
        <div class="foot_tac" v-if="result && result.type == '1'">
          <el-collapse v-model="activeNames">
            <div class="ccc1">
              <img
                src="../../assets/img/tc/tc_bor_003.png"
                alt=""
                style="width: 100%; display: block; margin: 0; padding: 0"
              />
            </div>
            <el-collapse-item name="1">
              <template slot="title">
                <div
                  style="
                    color: #01c2ff;
                    text-align: center;
                    border: 1px solid #01c2ff;
                    width: 100px;
                    height: 24px;
                    line-height: 24px;
                    margin: -5.8% 0 0 18px;
                  "
                  @click="closeResult"
                >
                  导热系数 <i class="header-icon el-icon-set-up"></i>
                </div>
                <div
                  style="
                    color: #01c2ff;
                    text-align: center;
                    height: 24px;
                    line-height: 24px;
                    margin: -5.8% 0 0 18px;
                  "
                >
                  {{ result.taskName }}
                </div>
                <i
                  class="el-collapse-item__arrow1 el-icon-arrow-right is-active"
                  @click="closeResult"
                ></i>
              </template>
              <div class="foot_tac_mm">
                <div class="foot_tac_lefts">
                  <div class="foot_tac_titles">
                    <span>线热源法</span>
                    <div class="foot_tac_cenners">
                      <span>{{ result.heatConductivity1 }}</span>
                    </div>
                  </div>
                </div>
                <div class="foot_tac_rights">
                  <div class="foot_tac_titles">
                    <span>热比较法</span>
                    <div class="foot_tac_cenners">
                      <span>{{ result.heatConductivity2 }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <div class="ccc2">
              <img
                src="../../assets/img/tc/tc_bor_004.png"
                alt=""
                style="width: 100%; display: block; margin: 0; padding: 0"
              />
            </div>
          </el-collapse>
        </div>

        <div class="foot_tac" v-if="result && result.type == '0'">
          <el-collapse v-model="activeNames">
            <div class="ccc1">
              <img
                src="../../assets/img/tc/tc_bor_003.png"
                alt=""
                style="width: 100%; display: block; margin: 0; padding: 0"
              />
            </div>
            <el-collapse-item name="1">
              <template slot="title">
                <div
                  style="
                    color: #01c2ff;
                    text-align: center;
                    border: 1px solid #01c2ff;
                    width: 100px;
                    height: 24px;
                    line-height: 24px;
                    margin: -5.8% 0 0 18px;
                  "
                  @click="closeResult"
                >
                  反演结果 <i class="header-icon el-icon-set-up"></i>
                </div>
                <div
                  style="
                    color: #01c2ff;
                    text-align: center;
                    height: 24px;
                    line-height: 24px;
                    margin: -5.8% 0 0 18px;
                  "
                >
                  {{ result.taskName }}
                </div>
                <i
                  class="el-collapse-item__arrow1 el-icon-arrow-right is-active"
                  @click="closeResult"
                ></i>
              </template>
              <div class="foot_tac_mm">
                <div class="foot_tac_left">
                  <img :src="baseUrl + result.dataFile + 'left.jpg'" alt="" />
                </div>
                <div class="foot_tac_right">
                  <img :src="baseUrl + result.dataFile + 'right.jpg'" alt="" />
                </div>
              </div>
            </el-collapse-item>
            <div class="ccc2">
              <img
                src="../../assets/img/tc/tc_bor_004.png"
                alt=""
                style="width: 100%; display: block; margin: 0; padding: 0"
              />
            </div>
          </el-collapse>
        </div>

        <div class="Hidden"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LineChart from "../../views/LineChart/LineChart";
import LinePieOne from "../../views/LineChart/LinePieOne.vue";
// 引入three.js
import * as THREE from "three";
// 引入扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { handleGetGyroscopeData } from "../../api/baseinfo/gyroscopeData";
import { temperatureChange } from "@/api/baseinfo/collectionTask";
import { getTaskList } from "../../api/vibration/vibration";
export default {
  name: "DialogComponent",
  components: {
    LineChart,
    LinePieOne,
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
    detailVisible: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      results: 1,
      datas: 1,
      isShow: true,
      activeShow: 1, //这个是切换css的效果 默认为1
      direction: "ttb",
      activeNames: "1",
      baseUrl: process.env.VUE_APP_BASE_API,
      result: null,
      scene: null,
      camera: null,
      renderer: null,
      src: require("../../assets/img/tc/tc_picture_001.png"),
      url: require("../../assets/img/tc/tc_picture_002.png"),
      urls: require("../../assets/img/tc/tc000.png"),
      donut: null,
      timei: null,
      timei2: null,
      gyroscopeData: {},
      wdbhData: {
        x: [],
        y: [],
      },
      equipmentCode: "",
      taskList: [],
    };
  },

  methods: {
    // 切换
    fn(i) {
      if (i == 1) {
        this.isShow = true;
        this.activeShow = 1;
        this.closeResult();
        this.handleGetTaskList(this.data.sn, "0");
      } else if (i == 2) {
        this.isShow = false;
        this.activeShow = 2;
        this.closeResult();
        this.handleGetTaskList(this.data.sn, "1");
      }
    },

    init() {
      let container = document.getElementById("container");
      const zhuziMaterial = new THREE.MeshPhysicalMaterial({
        color: 0x8F7648,
        // 设置金属度
        metalness: 0.8,
        // 粗糙度
        roughness:0.7,
        // 清漆光滑效果
        clearcoat: 1,
        // 粗糙度
        clearcoatRoughness: 0,
      });
      const zhuz1iMaterial = new THREE.MeshPhysicalMaterial({
        color: 0xffffff,
        // 设置金属度
        metalness: 1,
        // 粗糙度
        roughness:0.5,
        // 清漆光滑效果
        clearcoat: 1,
        // 粗糙度
        clearcoatRoughness: 0,
      });

      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0x00091a);
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      let clientWidth = container.clientWidth - 4;
      this.renderer.setSize(clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);
      this.camera = new THREE.PerspectiveCamera(
        75,
        clientWidth / container.clientHeight,
        0.1,
        1000
      );
      this.camera.position.set(80, 80, 100);
      this.scene.add(this.camera);
      
      // const axesHeper = new THREE.AxesHelper(15);
      // this.scene.add(axesHeper); 
      this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对
      let controls = new OrbitControls(this.camera, this.renderer.domElement);
      // to disable zoom
      controls.enableZoom = false;
      // to disable rotation
      controls.enableRotate = false;
      // to disable pan
      controls.enablePan = false;
      controls.addEventListener("change", this.renderer);
      const linght1 = new THREE.DirectionalLight(0xffffff, 1);
      linght1.position.set(0, 0, 10);
      this.scene.add(linght1);
      const linght2 = new THREE.DirectionalLight(0xffffff, 1);
      linght2.position.set(0, 0, -10);
      this.scene.add(linght2);
      const linght3 = new THREE.DirectionalLight(0xffffff, 1);
      linght3.position.set(10, 0, 0);
      this.scene.add(linght3);
      const linght4 = new THREE.DirectionalLight(0xffffff, 1);
      linght4.position.set(-10, 0, 0);
      this.scene.add(linght4);
      const linght5 = new THREE.DirectionalLight(0xffffff, 1);
      linght5.position.set(0, 10, 0);
      this.scene.add(linght5);
      const linght6 = new THREE.DirectionalLight(0xffffff, 0.3);
      linght6.position.set(5, 10, 0);
      this.scene.add(linght6);
      const linght7 = new THREE.DirectionalLight(0xffffff, 0.3);
      linght7.position.set(0, 10, 5);
      this.scene.add(linght7);
      const linght8 = new THREE.DirectionalLight(0xffffff, 0.3);
      linght8.position.set(0, 10, -5);
      this.scene.add(linght8);
      const linght9 = new THREE.DirectionalLight(0xffffff, 0.3);
      linght9.position.set(-5, 10, 0);
      this.scene.add(linght9);
      let zhuzi;

      const loader = new GLTFLoader();
      loader.load("models/object/scene.gltf", (result) => {
        this.donut = result.scene;
        this.donut.traverse((child) => {
          if (child.isMesh && child.name.includes("圆柱")) {
            zhuzi = child;
            zhuzi.material = zhuziMaterial;
          }
          if (child.isMesh && child.name.includes("圆柱_1")) {
            zhuzi = child;
            zhuzi.material = zhuz1iMaterial;
          }
        });

        const radius = 2;
        this.donut.position.set(0,0,0);
        this.donut.rotation.x = Math.PI * 0;
        this.donut.rotation.y = Math.PI * 0;
        this.donut.rotation.z = Math.PI * 0;
        this.donut.scale.set(radius, radius, radius);
        this.scene.add(this.donut);
        this.animate();

        //开启查询定时任务
        if (this.timei) clearInterval(this.timei);
        if (this.timei2) clearInterval(this.timei2);
        this.timei = setInterval(() => {
          this.getGyroscopeData();
        }, 500);
        this.wdbhData.x = [];
        this.wdbhData.y = [];
        this.equipmentCode = this.data.gyroscopeCode;
        this.handleChangeTask(this.equipmentCode);
        this.timei2 = setInterval(() => {
          this.handleChangeTask(this.equipmentCode);
        }, 12000);
      });

      //获取任务列表
      this.handleGetTaskList(this.data.sn, "0");
    },
    animate() {
      //执行渲染操作   指定场景、相机作为参数
      requestAnimationFrame(this.animate);
      this.render();
    },
    render() {
      this.renderer.render(this.scene, this.camera);
    },
    resetRender(x, y) {
      this.donut.rotation.x = (Math.PI * x) / 180;
      this.donut.rotation.z = (Math.PI * y) / 180;
      this.scene.add(this.donut);
      this.renderer.render(this.scene, this.camera);
    },
    drawClose() {
      clearInterval(this.timei);
      clearInterval(this.timei2);
      this.timei = null;
      this.timei2 = null;
      this.equipmentCode = null;
      this.data.gyroscopeCode = null;
      this.gyroscopeData = {};
      this.taskList = [];
      this.wdbhData.x = [];
      this.wdbhData.y = [];
      this.result = null;
      this.$emit("close", false);
    },
    getResult(data) {
      console.log(data);
      this.result = data;
    },
    closeResult() {
      this.taskList = [];
      this.result = null;
    },
    getGyroscopeData() {
      handleGetGyroscopeData(this.data.gyroscopeCode).then((res) => {
        if (res.data) {
          this.gyroscopeData = res.data;
          this.resetRender(res.data.dataX, res.data.dataY);
        }
      });
    },
    //右侧统计图表
    handleChangeTask(equipmentCode) {
      var that = this;
      //温度数据
      temperatureChange({ equipmentCode: equipmentCode }).then((res) => {
        if (res.wdbh) {
          const wdbh = res.wdbh;
          let x = [];
          let y = [];
          wdbh.forEach((item) => {
            x.push(item.dataTimeStr);
            y.push(item.temperature);
          });
          that.wdbhData.x = x;
          that.wdbhData.y = y;
        }
      });
    },
    //获取设备任务列表
    handleGetTaskList(sn, type) {
      getTaskList({ equipmentSn: sn, type: type }).then((res) => {
        this.taskList = res.data;
        console.log(this.taskList);
      });
    },
  },

  destroyed() {},
  mounted() {
    //this.init();
    // this.animate();
  },
};
</script>
<style>
.xjc {
  position: absolute;
}
.xjc .el-dialog {
  margin-top: 5% !important;
  left: 20%;
  right: 20%;
  overflow: hidden;
  margin: 0;
  background-color: #00091a;
}
/* 整体的背景颜色  宽高等 */
.xjc .el-dialog.ttb {
  width: 100%;
  left: 0;
  right: 0;
  height: auto !important;
  background-color: #00091a;
}
.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background: rgba(220, 220, 238, 0.1);
}
.xjc .el-dialog__header {
  height: 50px;
  padding: 0 !important;
  background-image: url("../../assets/img/bg_head1.png");
  overflow: hidden;
  background-size: 100% 100%;
  text-align: center;
}
.xjc .el-dialog__body {
  padding: 0 0 5px 0 !important;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
/* 标题的颜色
 */

.xjc .el-dialog__title {
  font-size: 18px;
  color: #fff;
  line-height: 48px;
  text-align: center;
}
/* 小 XX */
.xjc .el-icon-close:before {
  content: "\e6db";
  color: #fff;
}

/* 标题 */
.xjc .aaa span {
  margin-top: -18px;
  letter-spacing: 4px;
}
.xjc .health {
  position: relative;
  width: 100%;
  height: 300px;
  /* border: 1px solid #01c2ff; */
  /* position: absolute; */
}
@media (max-width: 1800px) {
  .xjc .aaa span {
    font-size: 12px !important;
  }
}
@media (max-width: 1600px) {
  .xjc .health {
    height: 250px;
  }
  .xjc .aaa span {
    font-size: 10px !important;
  }
  .xjc .el-button--primary {
    margin: 2.5px 2px 5px 0 !important;
    padding: 2.5px 2px 5px 5px;
  }
  .xjc .health-right_on {
    font-size: 18px;
  }
  /* .xjc #container{
    height: 140px ;width:210px;
  } */
  .xjc .health_right .textLeft {
    font-size: 12px !important;
    line-height: 20px !important;
  }
}
@media (max-width: 1400px) {
  .xjc .health {
    height: 220px;
  }
  .xjc .el-button--primary {
    margin: 2.5px 2px 5px 0 !important;
    padding: 2.5px 2px 5px 3px;
  }
  .xjc .health-right_on {
    font-size: 18px;
  }
  .xjc .health_right .textLeft {
    font-size: 12px !important;
    line-height: 20px !important;
  }
  .el-button [class*="el-icon-"] + span {
    margin-left: 2px;
  }
}
.xjc .health_left {
  float: left;
  /* position: relative; */
  margin-left: 2.8%;
  width: 18%;
  height: 100%;
  background-image: url("../../assets/img/tc/tc_bor_001.png");
  overflow: hidden;
  background-size: 100% 100%;
  z-index: 888999;
}
.xjc .health_left_img {
  width: 100%;
  height: 36%;
}
.xjc .health_left_img_cenner {
  /* border: 1px solid red;*/
  width: 49%;
  margin: 2.5% 30% 1.5% 25%;
}
.xjc .health_left_button {
  width: 100%;
  height: 64%;
  padding: 0;
}

/* 111 */
.xjc .el-button--primary {
  background: transparent;
  border: 1px solid transparent !important;
  margin: 2.5px 2.5% 5px 4px;
  /* padding: 2.5px 2.5% 5px 0 !important; */
  height: 20%;
  border-radius: 2px;
  text-align: left;
  color: #01c2ff;
  font-size: 14px;
  line-height: 5px;
}
.xjc .aaa span {
  margin-top: -18px;
  letter-spacing: 1px;
  font-size: 14px;
}

.xjc .health_cenner {
  /* position: relative; */
  float: left;

  margin-left: 1.5%;
  width: 51%;
  height: 100%;
  background-color: #00091a;

  border: 2px solid #01c2ff;
}

.xjc .health_right {
  float: left;

  margin-left: 1.4%;
  width: 22%;
  height: 100%;

  border: 2px solid #01c2ff;
}
.xjc .health-right_on {
  margin: 14px 30px 0 30px;
  font-size: 24px;
  text-align: center;
  color: #01c2ff;
}
#container {
  height: 160px;
  width: 252px;
}

.xjc .health_right .textLeft {
  margin: auto 8px;
  text-align: left;
  font-size: 14px;
  line-height: 28px;
  color: #01c2ff;
  overflow: hidden;
  z-index: 888;
  /* text-overflow: ellipsis;     // 溢出用省略号显示 */
  white-space: nowrap; /*  // 规定段落中的文本不进行换行 */
}
.xjc .textLeftSpan {
  display: inline-block;
  width: 80px;
  font-size: 14px;
}

.xjc .foots {
  margin: 9px auto 2px auto;
  width: 100%;
}
.xjc .foots_table {
  width: 94%;
  border: 2px solid #01c2ff;
  margin-left: 3%;
  height: 220px;
  overflow: hidden;
  /* background-color: red !important; */
}

.xjc .foots_ringht {
  width: 80%;
  margin-top: 5px;
  margin-left: 10%;
  height: 210px;
  float: left;
}

/* 分割线------------------------------------------------------------------------------------------ */
.xjc .foot {
  margin: 9px auto 2px auto;
  width: 100%;
}
.xjc .foot_table {
  width: 94%;
  /* border: 1px solid green; */
  margin-left: 3%;
  height: 230px;
  overflow: hidden;
  /* background-color: red !important; */
  background-image: url("../../assets/img/tc/tc_bor_002.png");
  overflow: hidden;
  background-size: 100% 100%;
}
.xjc .foot_table .bbb {
  width: 100px;
  height: 24px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 24px;
  color: #84d4ec;
  font-weight: 500;
  background-color: #32373f;
  float: left;

  margin: 10px 0 0 18px;
  border: 1px solid #65acc2;
}
.xjc .foot_table .bbb:hover {
  color: #01c2ff;
  border: 1px solid #01c2ff;
  background-color: #00091a;
  cursor: pointer; /*鼠标变小手*/
}
.xjc .foot_table .bbb.active {
  color: #01c2ff;
  border: 1px solid #01c2ff;
  background-color: #00091a;
}

.xjc .el-table tr {
  background-color: #00091a;
  color: #1fbcf5;
}
/* 去除element-ui中table 的hover效果 */
.xjc .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #01c2ff !important;
  color: #fff;
}

.xjc .demo-table-expand {
  font-size: 0;
  /* background-color: red; */
}
.xjc .el-table__fixed-right-patch {
  position: absolute;
  top: -1px;
  right: 0;

  background-color: #00091a;
  width: 0 !important;
  height: 0 !important;
}

.xjc .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0.3rem;
}
.xjc .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  height: 0.3rem;
}
.xjc .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 0.625rem;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #01c2ff;
}

.xjc .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 0.3125rem rgba(0, 0, 0, 0.2);
  border-radius: 0.3125rem;
  background: #00091a;
}

.xjc .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 0.625rem;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #01c2ff;
}
.xjc .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 0.3125rem rgba(0, 0, 0, 0.2);
  border-radius: 0.3125rem;
  background: #00091a;
}
.xjc .el-table__fixed-right::before,
.el-table__fixed::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #00091a;
  z-index: 4;
}
.xjc .el-table th.el-table__cell {
  overflow: hidden;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #00091a;
  padding: 0 0 8px 0;
}
.xjc .el-table {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 95%;
  max-width: 95%;
  font-size: 14px;
  margin-left: 2.5%;
  color: #606266;
  background-color: #00091a;
  margin-top: 5px;
}
/* 分割线---------------------------------------------------------- */

.xjc .foot_tac {
  width: 94%;
  margin-top: 6px;
  margin-left: 3%;
  /* background-color: red !important; */
}

/* 整个个标题的颜色 */
.xjc .el-collapse-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 10px;
  line-height: 10px;
  background-color: #00091a;
  color: #00c2ff;
  cursor: pointer;
  border-bottom: 1px solid !important;
  font-size: 18px;
  font-weight: 500;
  -webkit-transition: border-bottom-color 0.3s;
  transition: border-bottom-color 0.3s;
  outline: 0;
  border: 1px solid transparent !important;
}

/* 弹出的 背景颜色 */
.xjc .el-collapse-item__wrap {
  will-change: height;
  background-color: #00091a;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid transparent !important;
}
/*  控制Collapse 的样式 ^ */
.xjc .el-collapse-item__arrow {
  margin: 100% 100px 0 auto;
  transition: -webkit-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  font-weight: 300;
  transform: rotate(180deg);
  color: transparent;
  padding: 0;
}
.xjc .el-collapse-item__arrow1 {
  margin: -4.8% -90% 0 auto;

  transition: -webkit-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  font-weight: 300;
  transform: rotate(0deg);
  color: #00c2ff;
}

.xjc .foot_tac .el-collapse {
  border-top: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
}

.foot_tac_mm {
  height: auto;
  width: 100%;
}
.foot_tac_left {
  width: 29%;
  height: 250px;
  margin-top: 10px;
  border: 1px solid #00c2ff;
  margin-left: 2%;
  border-radius: 2px;
  float: left;
  padding: 0;
}

.foot_tac_right {
  float: left;
  width: 65%;
  height: 250px;
  margin-top: 10px;
  border: 1px solid #00c2ff;
  margin-left: 1% !important;
  border-radius: 2px;
}
.foot_tac_left img {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  margin: 0;
}
.foot_tac_right img {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  margin: 0;
}

.foot_tac_lefts {
  width: 295.668px;
  height: 172.14px;
  margin: 0 84px 0 200px;
  background-image: url("../../assets/img/zujian.png");
  overflow: hidden;
  background-size: 100% 100%;
  float: left;
  color: #cee8fc;
}

.foot_tac_rights {
  width: 295.668px;
  height: 172.14px;
  background-image: url("../../assets/img/zujian.png");
  overflow: hidden;
  background-size: 100% 100%;
  float: left;
  color: #cee8fc;
}
.foot_tac_titles {
  text-align: center;
  line-height: 80px;
  height: 80px;
}
.foot_tac_titles span {
  font-size: 24px !important;
}
.foot_tac_cenners span {
  color: #00c2ff;
  font-size: 34px !important;
}

.xjc .el-icon-arrow-right:before {
  content: "\e6e1";
}
</style>
